import React from 'react'
import { Tabs, Avatar, List } from 'antd';
import type { TabsProps } from 'antd';
const { TabsProps } = Tabs
function Index() {
    const data = [
        {
            title: '莫次有机PWE活性美白洗面奶优惠套装',
        },
        {
            title: '莫次有机PWE活性美白洗面奶优惠套装',
        },
        {
            title: '莫次有机PWE活性美白洗面奶优惠套装',
        },
        {
            title: '莫次有机PWE活性美白洗面奶优惠套装',
        },
        {
            title: '莫次有机PWE活性美白洗面奶优惠套装',
        },
        {
            title: '莫次有机PWE活性美白洗面奶优惠套装',
        },
        {
            title: '莫次有机PWE活性美白洗面奶优惠套装',
        },
        {
            title: '莫次有机PWE活性美白洗面奶优惠套装',
        },
    ];
    return (
        <div>
            <Tabs defaultActiveKey="1">
                <TabsProps tab='全部订单' key='1'>
                    <List
                        header='2017-12-10'
                        itemLayout="horizontal"
                        dataSource={data}
                        renderItem={(item, index) => (
                            <List.Item
                                extra={
                                    <div>
                                        <p>
                                            ￥169
                                        </p>
                                         <p>
                                            x1
                                        </p>
                                    </div>
                                }>
                                <List.Item.Meta
                                    avatar={<Avatar src={`https://api.dicebear.com/7.x/miniavs/svg?seed=${index}`} style={{ width: '100px', height: '100px' }} />}
                                    title={item.title}
                                    description="标准套装+红色"
                                />
                            </List.Item>
                        )}
                    />

                </TabsProps>
                <TabsProps tab='待支付' key='2'>
                    待支付待支付待支付待支付
                </TabsProps>
                <TabsProps tab='待发货' key='3'>
                    待发货待发货待发货
                </TabsProps>
                <TabsProps tab='待收货' key='4'>
                    待收货待收货待收货
                </TabsProps>
            </Tabs>
        </div>
    )
}

export default Index
